<template>
  <el-row>
    <el-col :style="'min-width:' + element.width + 'px;height: 32px;'">
      <template v-if="element.type == 'input'">
        <el-input
          :placeholder="element.options.placeholder"
          v-model="element.options.defaultValue"
          :show-password="element.options.password"
          :clearable="element.options.clearable"
          :maxlength="element.options.dataLength"
          :prefix="element.options.prefix"
          :suffix="element.options.suffix"
          :suffix-icon="element.options.suffixicon"
          :prefix-icon="element.options.prefixicon"
          :disabled="element.options.disabled"
          :show-word-limit="element.options.showwordlimit"
          :size="element.options.butsize"
        ></el-input>
      </template>
      <template v-else-if="element.type == 'textarea'">
        <el-input
          type="textarea"
          :autosize="{
            minRows: element.options.minRows,
            maxRows: element.options.maxRows
          }"
          :maxlength="element.options.dataLength"
          :placeholder="element.options.placeholder"
          v-model="element.options.defaultValue"
          :show-word-limit="element.options.showwordlimit"
          :disabled="element.options.disabled"
          :clearable="element.options.clearable"
        >
        </el-input>
      </template>
      <template v-else-if="element.type == 'radio'">
        <el-radio-group
          v-model="element.options.defaultValue"
          size="mini"
          style="min-width:150px; height:32px;line-height:30px;overflow:hidden;"
        >
          <template v-if="element.options.isbutton !== true">
            <el-radio
              style="inline"
              :label="item"
              v-for="(item, index) in element.options.options"
              :key="item + index"
              >{{ item }}</el-radio
            >
          </template>
          <template v-else>
            <el-radio-button
              :label="item"
              v-for="(item, index) in element.options.options"
              :key="item + index"
              >{{ item }}</el-radio-button
            >
          </template>
        </el-radio-group>
      </template>
      <template v-else-if="element.type == 'checkbox'">
        <el-checkbox-group
          v-model="element.options.defaultValue"
          size="mini"
          style="min-width:150px; height:32px;line-height:32px"
        >
          <template v-if="element.options.isbutton !== true">
            <el-checkbox
              style="inline"
              :label="item"
              v-for="(item, index) in element.options.options"
              :key="item + index"
              >{{ item }}</el-checkbox
            >
          </template>
          <template v-else>
            <el-checkbox-button
              style="inline"
              :label="item"
              v-for="(item, index) in element.options.options"
              :key="item + index"
              >{{ item }}</el-checkbox-button
            >
          </template>
        </el-checkbox-group>
      </template>
      <template v-else-if="element.type == 'date'">
        <template v-if="element.options.modeltype === 'date'">
          <el-date-picker
            v-model="element.options.defaultValue"
            :placeholder="element.options.placeholder"
            :format="element.options.format"
            :disabled="element.options.disabled"
            style="width: 100%;"
            value-format="yyyy-MM-dd"
          />
        </template>
        <template v-else-if="element.options.modeltype === 'year'">
          <el-date-picker
            v-model="element.options.defaultValue"
            type="year"
            format="yyyy"
            :placeholder="element.options.placeholder"
            :disabled="element.options.disabled"
            style="width: 100%;"
          >
          </el-date-picker>
        </template>
        <template v-else-if="element.options.modeltype === 'month'">
          <a-month-picker
            v-model="element.options.defaultValue"
            :placeholder="element.options.placeholder"
            format="yyyy-MM"
            :disabled="element.options.disabled"
            style="width: 100%;"
          />
        </template>
        <template v-else-if="element.options.modeltype === 'week'">
          <a-week-picker
            v-model="element.options.defaultValue"
            :placeholder="element.options.placeholder"
            :disabled="element.options.disabled"
            style="width: 100%;"
          />
        </template>
        <template v-else-if="element.options.modeltype === 'range'">
          <a-range-picker
            :show-time="{
              hideDisabledOptions: element.options.isshowtime,
              defaultValue: element.options.isshowtime
                ? [
                    moment('00:00:00', 'HH:mm:ss'),
                    moment('11:59:59', 'HH:mm:ss')
                  ]
                : []
            }"
            :format="element.options.format"
            style="width:100%"
            :disabled="element.options.disabled"
          />
        </template>
      </template>
      <template v-else-if="element.type == 'queryrelevance'">
        <queryrelevance :title="element.title"></queryrelevance>
      </template>
      <template v-else-if="element.type == 'datarelevance'">
        <datarelevance
          :filedlist="element.options.filedList"
          :dataid="element.options.defaultValue"
          :apicode="element.options.sourceApi"
          :title="element.title"
        ></datarelevance>
      </template>
      <template v-else-if="element.type === 'cityselector'">
        <cityselector v-model="element.options.defaultValue"></cityselector>
      </template>
      <template v-else-if="element.type === 'autonumber'">
        <autono
          :BusinessMoudle="element.options.BusinessMoudle"
          :BusinessModuleID="element.options.BusinessModuleID"
          :modelcode="element.options.modelcode"
        ></autono>
      </template>
      <template v-else-if="element.type === 'switch'">
        <el-switch
          v-model="element.options.defaultValue"
          :active-color="element.options.activecolor"
          :inactive-color="element.options.inactivecolor"
          :disabled="element.options.disabled"
        >
        </el-switch>
      </template>
      <template v-else-if="element.type === 'slider'">
        <el-slider
          v-model="element.options.defaultValue"
          :range="element.options.range"
          :disabled="element.options.disabled"
          :max="element.options.max"
          :min="element.options.min"
          :step="element.options.step"
        >
        </el-slider>
      </template>
      <template v-else-if="element.type === 'colorpicker'">
        <el-color-picker
          v-model="element.options.defaultValue"
          :disabled="element.options.disabled"
          :size="element.options.butsize"
        >
        </el-color-picker>
      </template>
      <template v-if="element.type === 'fromlable'">
        <fromlable
          :filed="element.options.defaultValue"
          :titlecolor="element.options.titlecolor"
        ></fromlable>
      </template>
      <template v-if="element.type === 'hidden'">
        <fromlable :filed="element.options.defaultValue"></fromlable>
      </template>
      <template v-else-if="element.type === 'upFilesComp'">
        <upfilescomp v-if="element.options.uptype === 'file'"></upfilescomp>
        <upmanyimgcomp
          v-else-if="element.options.uptype === 'img'"
        ></upmanyimgcomp>
        <upmanyimgcomp
          v-else-if="element.options.uptype === 'arryimg'"
        ></upmanyimgcomp>
      </template>
      <template v-if="element.type === 'fromlable'">
        <fromlable
          :filed="element.options.defaultValue"
          :titlecolor="element.options.titlecolor"
        ></fromlable>
      </template>
      <template v-else-if="element.type == 'select'">
        <el-select
          v-model="element.options.defaultValue"
          :multiple="element.options.isMulty"
          :placeholder="element.options.placeholder"
          :size="element.options.butsize"
          :clearable="element.options.clearable"
          :filterable="element.options.isSearch"
          :collapse-tags="element.options.collapsetags"
          :allow-create="element.options.allowcreate"
          :default-first-option="element.options.allowcreate"
          style="width: 100%;"
        >
          <el-option
            v-for="item in element.options.options"
            :key="item"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </template>
      <template
        v-else-if="
          element.type === 'user' ||
            element.type === 'organ' ||
            element.type === 'department' ||
            element.type === 'role'
        "
      >
        <selector
          :typemode="element.options.typemode"
          :ismulti="false"
        ></selector>
      </template>
      <template v-else-if="element.type === 'imgage'">
        <img
          data-v-6c4399d0=""
          src="http://localhost:8080/file/downloadImg?path=AttachmentFile%5C2021-01-11-12-30%5Ca54eb02e-faca-46a4-8262-e8ea6cefa217.jpg"
          width="150px"
          height="80px"
        />
      </template>
      <template v-else-if="element.type === 'rate'">
        <el-rate
          v-model="element.options.defaultValue"
          :readonly="element.options.readonly"
          :disabled="element.options.disabled"
        ></el-rate>
      </template>
      <template v-else-if="element.type === 'inputnumber'">
        <el-input-number
          v-model="element.options.defaultValue"
          :disabled="element.options.disabled"
          :min="element.options.min"
          :max="element.options.max"
          :label="element.options.describe"
          :step="element.options.step"
          :precision="element.options.precision"
          size="small"
        ></el-input-number>
      </template>
      <template v-else-if="element.type === 'timepicker'">
        <a-time-picker
          use12-hours
          :format="element.options.timeformat"
          :disabled="element.options.disabled"
          :minute-step="element.options.minute"
          :second-step="element.options.second"
          style="width: 100%;"
        />
      </template>
      <template v-if="element.type == 'button'">
        <el-button
          v-for="btn in element.options.buttons"
          style="margin-left:5px;"
          :size="btn.options.butsize"
          :key="btn.id"
          :type="btn.options.butType"
          :icon="btn.options.icon"
          @click.stop="selectWidget = btn"
          :plain="btn.options.isplain"
          :round="btn.options.isround"
          :circle="btn.options.iscircle"
          :disabled="btn.options.disabled"
        >
          {{ btn.options.labelTitle }}
        </el-button>
      </template>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: ['element', 'select', 'index', 'data'],
  components: {},
  data() {
    return {
      selectWidget: this.select
    }
  },
  methods: {},
  watch: {
    select(val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  },
  computed: {}
}
</script>
<style>
.el-radio .el-radio__label {
  font-size: 12px;
  padding-left: 5px;
}
</style>
<style scoped>
.detail-title {
  width: 100%;
  padding-left: 8px;
  height: 35px;
  line-height: 35px;
  background-color: #eaeaea;
  padding-right: 10px;
  position: relative;
  border-bottom: 1px solid #ccc;
}
.nav-tabs-link .fa-caret-square-o-right {
  font-size: 14px;
  color: #990000;
}
span.form_info {
  padding-left: 2px;
  font-weight: 600;
  color: #990000;
}
.nav-tabs-link a.arrow_telescopic.shrink {
  background-size: 16px 16px;
}
.nav-tabs-link a.arrow_telescopic {
  float: right;
  display: block;
  width: 34px;
  height: 34px;
}
.label-name {
  white-space: nowrap;
  line-height: 0;
  margin: 0;
  padding: 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid transparent;
  display: block;
  cursor: pointer;
  text-align: center;
  margin-right: 1px;
  height: 31px;
}

.label-name .el-radio {
  line-height: 1;
}
.column-content {
  text-align: center;
  line-height: 42px;
  width: 100%;
  padding: 4px 15px;
}
.detail-column {
  padding: 0;
  min-height: 60px;
  float: left;
  border-bottom: 1px solid transparent;
  border-right: 1px solid #ccc;
  border-left: none;
  position: relative;
}

.detail-column.active {
  background: #d3e2f1 !important;
}
.detail-column.active .label-name {
  background: #d3e2f1 !important;
}
.el-row.el-row--flex {
  border-top: 1px solid #ccc;
}

.layermend {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  font-weight: 400;
  background: 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  outline: none;
}
.layermend::after,
.layermend::before {
  position: absolute;
  right: 5px;
  top: 14px;
  content: '';
  width: 15px;
  height: 2px;
  background-color: red;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-radius: 3px;
}
.layermend::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.el-card .el-card__body {
  padding: 0px;
  height: 400px;
  overflow-y: auto;
}
</style>
<style lang="less" scoped>
.widget-form-container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .widget-form-list {
    height: 100%;
    padding-bottom: 50px;
    clear: both;
    overflow: hidden;
    //border: 2px dashed rgb(238, 238, 238);
    .widget-view {
      padding: 5px 10px 18px;
      margin: 0;
      position: relative;
      border: none;
      // border-left: 5px solid transparent;
      // height:44px;
      &.is_req {
        .el-form-item__label::before {
          content: '*';
          color: #f56c6c;
          margin-right: 4px;
        }
      }

      &:after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: block;
        z-index: 1001;
      }

      &:hover {
        background: #ecf5ff;
      }

      &.active {
        background: #d3e2f1 !important;
        div {
          background: #d3e2f1 !important;
        }

        span {
          background: #d3e2f1 !important;
        }
      }
    }

    .widget-action-delete {
      position: absolute;
      right: 20px;
      bottom: -35px;
      z-index: 1009;
    }

    .widget-action-clone {
      position: absolute;
      right: 70px;
      bottom: -35px;
      z-index: 1009;
    }
  }

  .widget-grid {
    //background: #F4F6FC;
    position: relative;
    border-left: 0px solid transparent;
    // padding: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
    /*border-top: 1px solid #ccc;*/
    border-left: 1px solid #ccc;

    &.active {
      background: #d3e2f1 !important;

      div {
        background: #d3e2f1 !important;
      }

      span {
        background: #d3e2f1 !important;
      }

      button {
        background: #d3e2f1 !important;
      }

      label {
        background: #d3e2f1 !important;
      }
    }
  }

  .widget-grid-container {
    &.ghost {
      &::after {
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: block;
        z-index: 10;
        content: '';
      }
    }
  }

  input {
    height: 32px;
  }

  .ghost {
    background: #fff;
    border: 1px dashed #409eff;
    float: left;
    height: 32px;
    box-sizing: border-box;

    &::after {
      background: #fff;
    }
  }

  .ghostpanel {
    background: #fff;
    border: 1px dashed #409eff;
    height: 100%;
    box-sizing: border-box;

    &::after {
      background: #fff;
    }
  }

  li.ghostpanel {
    height: 30px;
    list-style: none;
    font-size: 0;
  }

  li.ghost {
    height: 30px;
    list-style: none;
    font-size: 0;
  }
}
</style>
<style scoped>
.hiddenoverflow {
  overflow: hidden;
}

.ant-tabs-tabpane {
  border-bottom: 1px solid #ccc;
}
.ant-tabs-bar {
  margin-bottom: 5px;
}
.el-radio-group {
  line-height: 32px;
}
.form-control,
.single-line {
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 1px;
  color: inherit;
  display: block;
  padding: 6px 12px;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  font-size: 12px;
}

.required:before {
  content: '*';
  color: #c80000;
  font-size: 12px;
  vertical-align: top;
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 2px;
  margin-left: -9px;
}
.label-name.required:before {
  top: auto;
  margin-top: 2px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
  background-color: #fff;
  background-image: none;
  color: inherit;
  display: block;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    -webkit-box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s,
    -webkit-box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s,
    -webkit-box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  font-size: 12px;
  border-radius: 0;
}
.el-input__suffix {
  right: 0px;
  line-height: 32px;
}

.el-switch__label * {
  font-size: 12px;
}
.border-title {
  line-height: 42px;
  padding-left: 15px;
  border-top: none;
  border-right: none;
}

.border-content {
  border-top: none;
  border-right: none;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.border-mult .border-content {
  height: auto;
  border-bottom: none;
}

.border-mult {
  background-color: #f5f5f5;
}

.border-mult .border-title {
  height: auto;
  border-bottom: none;
  border-left: none;
  margin-left: -2px;
}
</style>
